<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <!-- <el-form-item label="类别ID" prop="categoryId">
        <el-input
          v-model="queryParams.categoryId"
          placeholder="请选择商品类别"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->

      <el-form-item label="类别" prop="categoryId">
    <el-select
      v-model="queryParams.categoryId"
      placeholder="请选择商品类别"
      clearable
      @change="handleQuery"
    >
      <el-option
        v-for="item in statusOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
</el-form-item>

      <!-- <el-form-item label="是否折扣" prop="isDiscount">
        <el-input
          v-model="queryParams.isDiscount"
          placeholder="请输入"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->



      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="product-list">
    <div v-for="product in offline_purchaseList" :key="product.productId" class="product-card">
      <img :src="getProductImage(product.productPhoto)" alt="商品图片" class="product-image" />
      <h3 class="product-name">{{ product.productName }}</h3>
      <p class="product-detail">{{ product.productDetail }}</p>

      <div class="price-options">
        <span class="price">小: {{ product.minPrice }}</span>
        <span class="price">中: {{ product.price }}</span>
        <span class="price">大: {{ product.maxPrice }}</span>
      </div>

      <p class="stock-status" v-if="product.inventoryNum > 0">库存{{product.inventoryNum}}</p>
      <p class="stock-status" v-else>缺货</p>
      <button class="add-to-cart"     v-if="product.inventoryNum >0 "  @click="SpecificationSelection(product)">加入购物车</button>
    </div>

<!-- 弹窗 -->
<div v-if="isModalOpen" class="modal">
  <div class="modal-content">
    <span @click="closeCartModal" class="close-button">&times;</span>
    <h2>规格选择</h2>
    <p>商品名称: <strong>{{ selectedProduct.productName }}</strong></p>

    <div class="form-group">
      <label for="size">选择规格:</label>
      <select v-model="selectedSize" id="size" class="select">
        <option value="小">小:{{ selectedProduct.minPrice}}</option>
        <option value="中">中: {{ selectedProduct.price }}</option>
        <option value="大">大: {{ selectedProduct.maxPrice }}</option>
      </select>
    </div>

    <div class="form-group">
      <label for="quantity">数量:</label>
      <input type="number" v-model="quantity" id="quantity" min="1" class="input" />
    </div>

    <p class="price">价格: <strong>{{ getPrice() }} 元</strong></p>

      <div class="button-container">
        <button class="add-to-cart" @click="closeCartModal">取消</button>
        <button class="add-to-cart" @click="addToCart" style=" margin-left: 30px;">确认</button>
      </div>
  </div>
</div>
</div>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div id="app">
  <div
    class="floating-cart"
    @mousedown="startDrag"
    @dblclick="toggleCart"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    <img src="../../../assets/images/buyCar.png" alt="" />
    <span class="item-count">{{ itemCount }}</span>
  </div>

  <!-- 弹窗 -->
  <div v-if="showCart" class="modal">
    <div class="modal-content">
      <span @click="closeCartModal" class="close-button">&times;</span>
    <div>   <button @click="removeItem_all(index)" class="remove-button">清空</button></div>
      <h2>购物车</h2>

      <ul>
        <li v-for="(item, index) in cart" :key="index" class="cart-item">
          <img :src="item.productPhoto" alt="" class="product-image-cart" />
          <div class="product-details">
            <div class="product-name">{{ item.productName }}</div>
            <div class="product-specifications">
              规格: {{ item.specifications }}
              <select v-model="item.specifications" @change="updateSpecification(index)">
                <option v-for="spec in availableSpecifications" :key="spec" :value="spec">{{ spec }}</option>
              </select>
              - 数量:
              <button @click="changeQuantity(index, -1)" class="quantity-button">-</button>
              {{ item.productNum }}
              <button @click="changeQuantity(index, 1)" class="quantity-button">+</button>
            </div>
            <div class="product-prices">
              <p>大: {{ item.maxPrice }} 中: {{ item.price }} 小: {{ item.minPrice }}</p>


            </div>
          </div>

          <button @click="removeItem(index)" class="remove-button">删除</button>
        </li>
      </ul>
      <div class="product-name" style="width: 100%; margin: 0 auto; text-align: center;">总价：{{ totalPriceOfShoppingCart }}</div>
      <div class="button-container">

        <button class="add-to-cart" @click="closeCartModal">返回</button>
        <button class="add-to-cart" @click="goToCart_buy" style="margin-left: 30px;">结算</button>
      </div>
    </div>
  </div>

</div>

    <!-- 添加或修改商品信息 ：与店铺关联对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-divider content-position="center">订单管理信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTbCustomerOrder">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTbCustomerOrder">删除</el-button>
          </el-col>
        </el-row>
        <el-table :data="tbCustomerOrderList" :row-class-name="rowTbCustomerOrderIndex" @selection-change="handleTbCustomerOrderSelectionChange" ref="tbCustomerOrder">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column label="顾客id" prop="customerId" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.customerId" placeholder="请输入顾客id" />
            </template>
          </el-table-column>
          <el-table-column label="订单时间" prop="orderTime" width="240">
            <template slot-scope="scope">
              <el-date-picker clearable v-model="scope.row.orderTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择订单时间" />
            </template>
          </el-table-column>
          <el-table-column label="订单总价" prop="orderPrice" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.orderPrice" placeholder="请输入订单总价" />
            </template>
          </el-table-column>
          <el-table-column label="根据消费金额所增加的积分" prop="orderPoint" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.orderPoint" placeholder="请输入根据消费金额所增加的积分" />
            </template>
          </el-table-column>
          <el-table-column label="订单状态id" prop="orderStatusId" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.orderStatusId" placeholder="请输入订单状态id" />
            </template>
          </el-table-column>
          <el-table-column label="顾客评价，用户对订单服务的评价" prop="orderComment" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.orderComment" placeholder="请输入顾客评价，用户对订单服务的评价" />
            </template>
          </el-table-column>
          <el-table-column label="叫餐号" prop="orderCallnum" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.orderCallnum" placeholder="请输入叫餐号" />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { listOffline_purchase, getOffline_purchase, add_order, addOffline_purchase, updateOffline_purchase } from "@/api/system/offline_purchase";


export default {
  name: "Offline_purchase",
  data() {
    return {
      statusOptions: [
      { label: '本地特色', value: 1 },
      { label: '当地特色', value: 2 },
      { label: '好评推荐', value: 3 },
      { label: '小众口味', value: 4 },
      { label: '新品上架', value: 5 }
    ],
    lastResetDate:"",
      count:0,//叫餐号清零判断
      // orderCallnum:1,//叫餐号
      oldSpecifications:{},//保存旧规格数据
      availableSpecifications: ['大', '中', '小'],
      itemTotalPrice:0,//当前规格商品价格
      cart: [], // 根据需要初始化
      orderDetail_single:{},//单个详情
      totalPriceOfShoppingCart:0,//购物车总价
      specifications_product:{}, //规格商品
      selectedSize: '中', // 默认尺寸
      quantity: 1, // 默认数量
      isModalOpen: false, // 控制弹窗显示
      selectedProduct: {}, // 存储被选中的产品
      itemCount: 0, // 购物车商品数量
      isDragging: false,
      showCart: false,
      position: { x: 1390, y: 114 }, // 初始位置
      offset: { x: 0, y: 0 }, // 鼠标偏移
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedTbCustomerOrder: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品信息 ：与店铺关联表格数据
      offline_purchaseList: [],
      // 订单管理表格数据
      tbCustomerOrderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        productName: null,
        productPhoto: null,
        productDetail: null,
        categoryId: null,
        price: null,
        maxPrice: null,
        minPrice: null,
        specificationId: null,
        saleNum: null,
        isDiscount: null,
        isOnSale: null,
        discontStrength: null,
        storeId: null
      },
        // 查询参数
        orderParams: {
        pageNum: 1,
        pageSize: 20,
        productName: null,
        productPhoto: null,
        productDetail: null,
        categoryId: null,
        price: null,
        maxPrice: null,
        minPrice: null,
        specificationId: null,
        saleNum: null,
        isDiscount: null,
        isOnSale: null,
        discontStrength: null,
        storeId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        productName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    checkDate() { //通过比较日期刷新取餐号

      const today = new Date();
      const day = today.getDate(); // 获取今天的日期（1-31）
      

      if (this.lastResetDate !== day) {
        this.$orderCallnum = 1;  // 重置为1
        this.lastResetDate = day; // 更新日期
      }
    },
    goToCart_buy(){ //结算

      this.$modal.msgSuccess("正在前往支付界面，请稍后");

      if(this.lastResetDate == ""){
        const today = new Date();
        const day = today.getDate(); // 获取今天的日期（1-31）
        console.log(day); // 输出今天的日期 25

        this.lastResetDate  = day; //上次的日期 25
      }

     this.checkDate(); //判断要不要刷新日期


// 假设 cart 是购物车对象数组
   // 创建一个新数组，不包含 productPhoto 属性
    const newCart = this.cart.map(item => {
        const { productPhoto, ...rest } = item; // 解构赋值，移除 productPhoto
        return rest; // 返回移除后的对象
    });



     let data = {
      "tbCustomerOrderDetail" : newCart,
      "total": this.totalPriceOfShoppingCart,
      "orderPoint": this.totalPriceOfShoppingCart,
      "orderCallnum" : this.orderCallnum
     };

     this.loading = true;



     add_order(data).then(response => {
      this.$orderCallnum += 1;

  

      this.loading = false;

      console.log("Redirecting to:", response); // 输出重定向的 URL
      window.location.href = response;


    }).catch(error => {
      console.log(error);
    });

    },
    updateSpecification(index) {


    let newNum = Number(this.totalPriceOfShoppingCart);


    // 减去当前规格的价格
    if ( this.oldSpecifications[index].specifications == "中") {
        newNum -= Number(this.cart[index].productNum) * Number(this.cart[index].price);
    } else if ( this.oldSpecifications[index].specifications == "大") {
        newNum -= Number(this.cart[index].productNum) * Number(this.cart[index].maxPrice);
    } else if ( this.oldSpecifications[index].specifications == "小") {
        newNum -= Number(this.cart[index].productNum) * Number(this.cart[index].minPrice);
    }


    // 加上新的规格的价格
    const newSpecification = this.cart[index].specifications;
    if (newSpecification == "中") {
        newNum += Number(this.cart[index].productNum) * Number(this.cart[index].price);
    } else if (newSpecification == "大") {
        newNum += Number(this.cart[index].productNum) * Number(this.cart[index].maxPrice);
    } else if (newSpecification == "小") {
        newNum += Number(this.cart[index].productNum) * Number(this.cart[index].minPrice);
    }

    // 更新总价格
    this.totalPriceOfShoppingCart = newNum;

    // this.oldSpecifications = this.cart; //备份


},

    changeQuantity(index, change) {

      const product = this.offline_purchaseList.find(item => item.productName === this.cart[index].productName)


    if(Number(this.cart[index].productNum) + Number(change) > product.inventoryNum ){
        
      this.$modal.msgSuccess("数量超出，请注意商品库存数量");
      return;
    }



    this.cart[index].productNum = Number(this.cart[index].productNum) + Number(change);

    if (this.cart[index].specifications == "中"){
      this.totalPriceOfShoppingCart = this.totalPriceOfShoppingCart + change * this.cart[index].price;
    }else if (this.cart[index].specifications == "大"){
      this.totalPriceOfShoppingCart = this.totalPriceOfShoppingCart + change * this.cart[index].maxPrice;
    }else if (this.cart[index].specifications == "小"){
      this.totalPriceOfShoppingCart = this.totalPriceOfShoppingCart + change * this.cart[index].minPrice;
    }



    if (this.cart.length <= 0) {
      this.removeItem(index);
    }




    this.itemCount = this.cart.length;

    if (this.cart.length == 0 ){
      this.showCart =false;
    }
  },
  removeItem(index) {
    this.cart.splice(index, 1);
    this.itemCount = this.cart.length;

    if (this.cart.length == 0 ){
      this.showCart =false;
    }

  },

  removeItem_all() {
    this.cart = [];
    this.itemCount = this.cart.length;

    if (this.cart.length == 0 ){
      this.showCart =false;
    }
    this.$modal.msgSuccess("已清空购物车");
  },

    //单击购物车
    toggleCart() {
      this.showCart = true;


    

  },
    getPrice() { //计算价格
    let priceMultiplier = 0; // 基础价格

    // 根据选择的尺寸调整价格
    if (this.selectedSize === '小') {
      priceMultiplier =   this.selectedProduct.minPrice;
    } else if (this.selectedSize === '大') {
      priceMultiplier =   this.selectedProduct.maxPrice;
    } else if (this.selectedSize === '中') {
      priceMultiplier =    this.selectedProduct.price;
    }

    // // 计算购物车总价并更新
   this.itemTotalPrice = (priceMultiplier * this.quantity).toFixed(2);

    return this.itemTotalPrice; // 计算单个规格商品价格
  },
  addToCart() { //添加到购物车



    //存规格商品信息
    this.orderDetail_single = {
      productName: this.selectedProduct.productName,
      specifications: this.selectedSize,
      productNum: this.quantity,
      productPhoto: this.selectedProduct.productPhoto,
      price: this.selectedProduct.price,
      maxPrice: this.selectedProduct.maxPrice,
      minPrice: this.selectedProduct.minPrice,
    };

   const product = this.offline_purchaseList.find(item => item.productName === this.orderDetail_single.productName)


   if( this.orderDetail_single.productNum > product.inventoryNum ){
     
     this.$modal.msgSuccess("数量超出，请注意商品库存数量");
     return;
   }

    this.totalPriceOfShoppingCart  =  this.totalPriceOfShoppingCart + parseFloat(this.itemTotalPrice); // 计算购物车总价

    this.cart.push(this.orderDetail_single); //添加

    this.itemCount = this.cart.length; //数量计算

    this.oldSpecifications = JSON.parse(JSON.stringify(this.cart)); // 使用 JSON 方法进行深拷贝备份


  this.closeCartModal();
  this.$modal.msgSuccess("已添加到购物车");
},

    closeCartModal() {
      this.isModalOpen = false; // 关闭弹窗
      this.showCart = false; // 关闭弹窗

      this.selectedSize='中'; // 默认尺寸
      this.quantity= 1; // 默认数量
    },
    startDrag(event) {

      this.isDragging = true;
      this.offset.x = event.clientX - this.position.x;
      this.offset.y = event.clientY - this.position.y;

      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
    if (!this.isDragging) return; // 确保只有在拖动状态下才执行

    this.position.x = event.clientX - this.offset.x;
    this.position.y = event.clientY - this.offset.y;

    this.updateElementPosition();
  },
    stopDrag() {
      this.isDragging = false; // 确保拖动状态被重置

      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);

      // 可能需要重置元素的位置，防止残留效果
      this.updateElementPosition(); // 确保最后的位置更新
    },
    updateElementPosition(event) {
    const element = this.$refs.draggableElement; // 确保这个 ref 存在
    if (element) {
        // 更新位置逻辑
    }
},
    getProductImage(photo) { //判断图片类型
      return Array.isArray(photo) ? photo[0] : photo;
    },
    SpecificationSelection(product) { //规格选择
      this.isModalOpen = true; // 打开弹窗
      this.selectedProduct = product;

    },
    /** 查询商品信息 ：与店铺关联列表 */
    getList() {


      this.loading = true;
      listOffline_purchase(this.queryParams).then(response => {
        this.offline_purchaseList = response.rows;
        this.total = response.total;
        this.loading = false;

     
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        productId: null,
        productName: null,
        productPhoto: null,
        productDetail: null,
        categoryId: null,
        price: null,
        maxPrice: null,
        minPrice: null,
        specificationId: null,
        saleNum: null,
        isDiscount: null,
        isOnSale: null,
        discontStrength: null,
        storeId: null
      };
      this.tbCustomerOrderList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品信息 ：与店铺关联";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const productId = row.productId || this.ids
      getOffline_purchase(productId).then(response => {
        this.form = response.data;
        this.tbCustomerOrderList = response.data.tbCustomerOrderList;
        this.open = true;
        this.title = "修改商品信息 ：与店铺关联";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.tbCustomerOrderList = this.tbCustomerOrderList;
          if (this.form.productId != null) {
            updateOffline_purchase(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOffline_purchase(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

	/** 订单管理序号 */
    rowTbCustomerOrderIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 订单管理添加按钮操作 */
    handleAddTbCustomerOrder() {
      let obj = {};
      obj.customerId = "";
      obj.orderTime = "";
      obj.orderPrice = "";
      obj.orderPoint = "";
      obj.orderStatusId = "";
      obj.orderComment = "";
      obj.orderCallnum = "";
      this.tbCustomerOrderList.push(obj);
    },
    /** 订单管理删除按钮操作 */
    handleDeleteTbCustomerOrder() {
      if (this.checkedTbCustomerOrder.length == 0) {
        this.$modal.msgError("请先选择要删除的订单管理数据");
      } else {
        const tbCustomerOrderList = this.tbCustomerOrderList;
        const checkedTbCustomerOrder = this.checkedTbCustomerOrder;
        this.tbCustomerOrderList = tbCustomerOrderList.filter(function(item) {
          return checkedTbCustomerOrder.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleTbCustomerOrderSelectionChange(selection) {
      this.checkedTbCustomerOrder = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/offline_purchase/export', {
        ...this.queryParams
      }, `offline_purchase_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>


<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin: 8px;
  text-align: center;
  width: 200px;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: scale(1.05);
}
.product-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.product-image-cart {
  width: 25%;
  height: auto;
  border-radius: 4px;
}
.product-name {
  font-size: 1.5em;
  margin: 8px 0;
}
.product-detail {
  color: #666;
  margin: 8px 0;
}
.product-price {
  font-size: 1.2em;
  margin: 8px 0;
}
.original-price {
  text-decoration: line-through;
  color: #999;
}
.discounted-price {
  color: #ff5722;
}
.discount-strength {
  font-weight: bold;
}
.stock-status {
  margin: 8px 0;
}
.add-to-cart {
  background-color: #ff5722;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

}
.add-to-cart:hover {
  background-color: #e64a19;
}

.price-options {
  margin: 10px 0;
  font-size: 14px; /* 调整字体大小 */
}

.price {
  margin-right: 10px; /* 调整价格之间的间距 */
}


.floating-cart {
  position: fixed;
  background-color: #ff5722; /* 按钮背景颜色 */
  border-radius: 100%; /* 圆形按钮 */
  padding: 15px; /* 内边距 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

.floating-cart:hover {
  background-color: #e64a19; /* 悬停时的背景颜色 */
}

.floating-cart img {
  width: 30px; /* 图标宽度 */
  height: 30px; /* 图标高度 */
}

.item-count {
  position: absolute;
  top: -5px; /* 位置调整 */
  right: -5px; /* 位置调整 */
  background-color: #ffffff; /* 数量标签背景颜色 */
  border-radius: 80%; /* 圆形 */
  padding: 2px 5px; /* 内边距 */
  font-size: 12px; /* 字体大小 */
  color: #ff5722; /* 字体颜色 */
  font-weight: bold; /* 字体加粗 */
}


.modal {
  /* 模态框样式 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 其他样式 */
}

.modal-content {
  /* 模态框内容样式 */
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  /* 其他样式 */
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.product-image-cart {
  width: 60px; /* 根据需要调整图片大小 */
  height: 60px; /* 根据需要调整图片大小 */
  margin-right: 15px; /* 图片和内容之间的间距 */
}

.product-details {
  display: flex;
  flex-direction: column; /* 纵向排列 */
}

.product-name {
  font-weight: bold;
}

.product-specifications {
  color: gray; /* 规格和数量的颜色 */
}

.button-container {
  display: flex;
  justify-content: flex-end; /* 按钮靠右对齐 */
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 500px;
}

.close-button {
  cursor: pointer;
  font-size: 24px;
  color: #ff0000;
  float: right;
}

h2 {
  margin: 0 0 20px 0;
  text-align: center;
}

.form-group {
  margin: 10px 0;
}

.select, .input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.price {
  text-align: center;
  font-size: 18px;
  margin-top: 20px;
  color: #333;
}


.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 可根据需要调整 */
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 使内容分布在两侧 */
  margin-bottom: 15px;
}

.product-details {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  flex-grow: 1; /* 使内容区域尽量占用空间 */
}

.quantity-button {
  margin: 0 5px; /* 按钮间距 */
}

.remove-button {
  background-color: red; /* 删除按钮样式 */
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}


</style>
